<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
#div1  {width: 200px;  height: 200px; background-color: aqua;}
</style>
<script>
function setColor(color)
{
    var oDiv=document.getElementById('div1');

    oDiv.style.background=color;
}


function  toYellow()
{
    var  oDiv=document.getElementById('div1');

    oDiv.style.backgroundColor='yellow';
}
function  toRed()
{
    var  oDiv=document.getElementById('div1');

    oDiv.style.backgroundColor='red';
}
function  toPurple()
{
    var  oDiv=document.getElementById('div1');

    oDiv.style.backgroundColor='purple';
}
</script>
</head>

<body>
<input  type="button" value="变黄"  onclick="setColor('yellow');"/>
<input  type="button" value="变红"  ondblclick="setColor('red');" />
<input  type="button" value="变紫"   onclick="setColor('purple');" />
<div  id="div1">
</div>
</body>
</html>